'use client'
import { useGSAP } from '@gsap/react'
import { useState } from 'react'
import gsap from 'gsap'
import { useMount } from 'ahooks'

const Category = () => {
  const [activeTab, setActiveTab] = useState(0)
  const [indicatorLeft, setIndicatorLeft] = useState(0)
  const [indicatorWidth, setIndicatorWidth] = useState(0)

  const handleTabClick = (index: number, e: any) => {
    setIndicatorLeft(e.target.offsetLeft)
    setIndicatorWidth(e.target.offsetWidth * 0.5)
    setActiveTab(index)
  }

  useGSAP(() => {
    // 元素进入动画
    gsap.from('.category li', {
      opacity: 0,
      y: -20,
      stagger: 0.1,
      duration: 0.5,
      ease: 'power2.out'
    })
  })

  useMount(() => {
    const li = document.querySelector('.category li') as any
    setIndicatorLeft(li?.offsetLeft)
    setIndicatorWidth(li?.offsetWidth * 0.5)
  })

  return (
    <div className='relative'>
      <ul className="category flex items-center border-b border-[#E2E2E2] text-[#626262] mb-[10px] md:mb-[20px] xl:mb-[30px]">
        <li className="text-xs lg:text-base xl:text-[20px] lg:leading-[20px] px-[7px] md:px-[20px] xl:px-[40px] py-[10px] md:py-[18px] xl:py-[30px] cursor-pointer select-none relative" onClick={(e) => handleTabClick(0, e)}>全部</li>
        <li className="text-xs lg:text-base xl:text-[20px] lg:leading-[20px] px-[7px] md:px-[20px] xl:px-[40px] py-[10px] md:py-[18px] xl:py-[30px] cursor-pointer select-none relative" onClick={(e) => handleTabClick(1, e)}>保研资讯</li>
        <li className="text-xs lg:text-base xl:text-[20px] lg:leading-[20px] px-[7px] md:px-[20px] xl:px-[40px] py-[10px] md:py-[18px] xl:py-[30px] cursor-pointer select-none relative" onClick={(e) => handleTabClick(2, e)}>保研干货</li>
        <li className="text-xs lg:text-base xl:text-[20px] lg:leading-[20px] px-[7px] md:px-[20px] xl:px-[40px] py-[10px] md:py-[18px] xl:py-[30px] cursor-pointer select-none relative" onClick={(e) => handleTabClick(3, e)}>大数据分析</li>
        <li className="text-xs lg:text-base xl:text-[20px] lg:leading-[20px] px-[7px] md:px-[20px] xl:px-[40px] py-[10px] md:py-[18px] xl:py-[30px] cursor-pointer select-none relative" onClick={(e) => handleTabClick(4, e)}>保研思享</li>
        <li className="text-xs lg:text-base xl:text-[20px] lg:leading-[20px] px-[7px] md:px-[20px] xl:px-[40px] py-[10px] md:py-[18px] xl:py-[30px] cursor-pointer select-none relative" onClick={(e) => handleTabClick(5, e)}>资料下载</li>
      </ul>
      <div className='w-0 transition-all duration-500 ease-out absolute bottom-0 left-0 right-0 h-[3px] bg-[#1456A2]' style={{ left: indicatorLeft + (indicatorWidth / 2), width: indicatorWidth }}></div>
    </div>
  )
}

export default Category